import { Link } from "react-router-dom";
import "./index.scss";
import classNames from "classnames";
import { useEffect, useRef, useState } from "react";
function XtxCarousel({
  carouselList,
  autoplay = false,
  duration = 1000,
  style,
}: {
  carouselList: any[];
  autoplay?: boolean;
  duration?: number;
  style?: any;
}) {
  const customStyle = { ...style };
  const [index, setIndex] = useState(0);
  const timerRef = useRef<NodeJS.Timeout | null>(null); // 使用 useRef 代替 let timer

  const autoPlayFn = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
    timerRef.current = setInterval(() => {
      setIndex((prev) => {
        return prev === carouselList.length - 1 ? 0 : prev + 1;
      });
    }, duration);
  };
  const stop = function () {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
  };
  const start = function () {
    if (carouselList.length && autoplay) {
      autoPlayFn();
    }
  };

  useEffect(() => {
    if (carouselList.length && autoplay) {
      autoPlayFn();
    }
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current); // 在组件卸载时清除定时器
      }
    };
  }, [carouselList, autoplay, duration]); // 将 autoplay 和 duration 添加到依赖数组中

  const toggle = function (step: number) {
    const newIndex = index + step;
    if (newIndex >= carouselList.length) {
      setIndex(0);
      return;
    }
    if (newIndex < 0) {
      setIndex(carouselList.length - 1);
      return;
    }
    setIndex(newIndex);
  };
  return (
    <>
      <div
        style={customStyle}
        className="xtx-carousel"
        onMouseEnter={stop}
        onMouseLeave={start}
      >
        <ul className="carousel-body">
          {carouselList &&
            carouselList.map((item: any, i) => (
              <li
                key={item.id}
                className={classNames("carousel-item", {
                  fade: index === i,
                })}
              >
                {/* 图片 */}
                {item.imgUrl ? (
                  <Link to="/">
                    <img src={item.imgUrl} alt="" />
                  </Link>
                ) : (
                  <div className="slider">
                    {/* item=>[] */}
                    {item.map((goods: any) => (
                      <Link to={`/product/${goods.id}`} key={item.id}>
                        <img src={goods.picture} alt="" />
                        <p className="name ellipsis">{goods.name}</p>
                        <p className="price">&yen;{goods.price}</p>
                      </Link>
                    ))}
                  </div>
                )}
              </li>
            ))}
        </ul>
        <a
          href="javascript:;"
          className="carousel-btn prev"
          onClick={() => toggle(-1)}
        >
          <i className="iconfont icon-angle-left"></i>
        </a>
        <a
          href="javascript:;"
          className="carousel-btn next"
          onClick={() => toggle(1)}
        >
          <i className="iconfont icon-angle-right"></i>
        </a>
        <div className="carousel-indicator">
          {carouselList &&
            carouselList.map((item, i) => (
              <span
                key={i}
                className={classNames({ active: index === i })}
                onClick={() => setIndex(i)}
              ></span>
            ))}
        </div>
      </div>
    </>
  );
}

export default XtxCarousel;
